<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">房产详情</small>
      </a>
    </header>
    <main>
      <section class="detail_status_info">
        <header><span>基本信息</span></header>
        <p><label>详细坐落地址：</label><span>{{this.listData.fld_43}}{{this.listData.fld_county}}{{this.listData.fld_street}}{{this.listData.fld_streetadd}}</span></p>
        <p><label>所属部门(分公司)：</label><span>{{this.listData.fld_5}}</span></p>
        <p><label>房产类型：</label><span>{{this.listData.fld_10}}</span></p>
        <p><label>权证编码：</label><span>{{this.listData.fld_16}}</span> </p>
        <p><label>房产证权属单位：</label><span>{{this.listData.fld_17}}</span> </p>
        <p><label>建筑面积(m²)：</label><span>{{this.listData.fld_14}}</span> </p>
      </section>
      <el-collapse accordion class="detail_status_info">
        <el-collapse-item>
          <template slot="title" name="1">
              <div class="collapseheader"><i class="header-icon el-icon-document"></i>门市买场档案 <span>（门市总面积：{{this.retailArchivesSum}}）</span></div>
           </template>
            <div>
              <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>门市店面名称</th>
                  <th>门市卖场总面积</th>
                  </tr>
                  <tr  v-for="item in retailArchives">
                  <td>
                      <router-link :to='{name: "RetailArchivesdetail",query:{name:item.name,key:2}}'>
                        {{item.name}}
                      </router-link>
                  </td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
                </div>
          </el-collapse-item>

           <el-collapse-item>
          <template slot="title" name="1">
            <div class="collapseheader">
              <i class="header-icon el-icon-document"></i>仓库档案 <span>（仓库总面积：{{this.wareHouseArchivesSum}}）</span></div>
          </template>
            <div>
              <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>仓库名称</th>
                  <th>仓库总面积</th>
                  </tr>
                  <tr  v-for="item in wareHouseArchives">
                  <td>
                     <router-link :to='{name: "WareHouseArchivesdetail",query:{name:item.name,wareHousekey:2}}'>
                        {{item.name}}
                     </router-link>
                  </td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
                </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title" name="2">
              <div class="collapseheader">
                <i class="header-icon el-icon-document"></i>办公场所 <span>（仓库档案：{{this.workHouseArchivesSum}}）</span></div>
            </template>
            <div>
               <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>办公场所名称</th>
                  <th>办公场所总面积</th>
                  </tr>
                  <tr v-for="item in workHouseArchives">
                  <td>
                       <router-link :to='{name: "WorkHouseArchivesdetail",query:{name:item.name,WorkHouse:2}}'>
                          {{item.name}}
                       </router-link>
                    </td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
            </div>
          </el-collapse-item>
           <el-collapse-item>
            <template slot="title" name="2">
              <div class="collapseheader">
                <i class="header-icon el-icon-document"></i>其他房产 <span>（其他房产总面积{{this.otherHouseArchivesSum}}）</span></div>
            </template>
            <div>
               <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>其他房产名称</th>
                  <th>其他房产总面积</th>
                  </tr>
                  <tr  v-for="item in otherHouseArchives">
                  <td>
                     <router-link :to='{name: "OtherHouseArchivesdetail",query:{name:item.name,OtherHouse:2}}'>
                          {{item.name}}
                       </router-link>
                  </td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
            </div>
          </el-collapse-item>
           <el-collapse-item>
            <template slot="title" name="2">
              <div class="collapseheader">
                <i class="header-icon el-icon-document"></i>代管房产档案 <span>（代管房产总面积{{this.escrowHouseArchivesSum}}）</span></div>
            </template>
            <div>
               <table class="dataintable">
                  <tbody>
                  <tr>
                  <th>代管房产名称</th>
                  <th>代管房产总面积</th>
                  </tr>
                  <tr  v-for="item in escrowHouseArchives">
                  <td>
                      <router-link :to='{name: "EscrowHouseArchivesdetail",query:{name:item.name,EscrowHouse:2}}'>
                         {{item.name}}
                       </router-link>
                  </td>
                  <td>{{item.area}}</td>
                  </tr>
                  </tbody></table>
            </div>
          </el-collapse-item>
        </el-collapse>
            </main>
          </div>
        </template>

<script>
  import {
    ViewDetail
  } from '../../../api/api';
  export default {
    data() {
      return {
        listData: {},
  
        //门市买场档案
        retailArchivesSum: 0,
        retailArchives: [],

        //办公场所
        workHouseArchivesSum: 0,
        workHouseArchives: [],
  
        //仓库名称
        wareHouseArchivesSum: 0,
        wareHouseArchives: [],

        //其他房产
        otherHouseArchivesSum:0,
        otherHouseArchives: [],

        //代管房产档案
        escrowHouseArchivesSum:0,
        escrowHouseArchives:[],
      };
    },
    methods: {
      getData() {
        let options = {
          params: {
            unid: this.$route.query.unid
          }
        }
        //调取接口
        ViewDetail(options).then((res) => {
           var _this = this;
          this.listData = res.fields

          //代管房产
          this.oescrowHousename = res.fields.fld_1140.split('~')
          this.oescrowHousearea=res.fields.fld_6610.split('~')
          this.oescrowHousename.map(function(v,i){
              var value=_this.oescrowHousearea[i];
              _this.escrowHouseArchives.push({'name':v,'area':value})
              if(value==""){
                value=0
              }
              _this.escrowHouseArchivesSum+=JSON.parse(value)
          })

          //仓库档案
           this.wareHousename = res.fields.fld_1130.split('~')
           this.wareHousearea = res.fields.fld_6600.split('~')
            this.wareHousename.map(function(v,i){
              var value=_this.wareHousearea[i];
              _this.wareHouseArchives.push({'name':v,'area':value})
              if(value==""){
                value=0
              }
              _this.wareHouseArchivesSum+=JSON.parse(value)
          })
         
         //办公场所
            this.Offspacename = res.fields.fld_1150.split('~')
            this.Offarea = res.fields.fld_6900.split('~')
            this.Offspacename.map(function(v,i){
              var value=_this.Offarea[i];
              _this.workHouseArchives.push({'name':v,'area':value})
              if(value==""){
                value=0
              }
              _this.workHouseArchivesSum+=JSON.parse(value)
          })  
          //门市买场
            this.retailname = res.fields.fld_1123.split('~')
            this.retailearea = res.fields.fld_5800.split('~')
            this.retailname.map(function(v,i){
              var value=_this.retailearea[i];
              _this.retailArchives.push({'name':v,'area':value})
              if(value==""){
                value=0
              }
              _this.retailArchivesSum+=JSON.parse(value)
          })  
        //其他
            this.otherHousename = res.fields.fld_74000.split('~')
            this.otherHousearea = res.fields.fld_76000.split('~')
            this.otherHousename.map(function(v,i){
              var value=_this.otherHousearea[i];
              _this.otherHouseArchives.push({'name':v,'area':value})
              if(value==""){
                value=0
              }
              _this.otherHouseArchivesSum+=JSON.parse(value)
          })  



        })
      },
    

    },
    mounted() {
      this.getData();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  
</style>
